class tab{
	constructor (){
		this.btn = document.getElementsByTagName("input");
		this.li = document.getElementsByTagName("li");
	}
	show(){
		var _this = this;
		for(var i = 0;i<_this.btn.length;i++){
			_this.btn[i].index=i;
			_this.btn[i].onclick = function () {
				for (var i = 0;i<_this.li.length;i++) {
					_this.btn[i].className = '';
					_this.li[i].style.display = 'none';
				}
				this.className = 'active';
				_this.li[this.index].style.display = 'block';
			}
		}
	}
	
}

window.onload = function(){
	var n = new tab();
	n.show();
}











//window.onload = function () {
//	
//	var btn = document.getElementsByTagName("input");
//	var li = document.getElementsByTagName("li");
//	for(var i = 0;i<btn.length;i++){
//		btn[i].index=i;
//		btn[i].onclick = function () {
//			for (var i = 0;i<li.length;i++) {
//				btn[i].className = '';
//				li[i].style.display = 'none';
//			}
//			this.className = 'active';
//			li[this.index].style.display = 'block';
//		}
//	}
//	
//}